import React from 'react';
import './goods.css';
import { Tabs } from 'antd';
import {HashRouter,Link,Redirect} from 'react-router-dom';
import caricon from '../../images/qimgs/index/caricon.png';
import nameicon from '../../images/qimgs/index/nameicon.png';
import phoneicon from '../../images/qimgs/index/phoneicon.png';
import adressicon from '../../images/qimgs/index/adressicon.png';
const { TabPane } = Tabs;
class Goods extends React.Component{
    constructor(props){
        super(props);
        this.state={
            headpic:this.props.msg.headpic,
            picarr:this.props.msg.picarr,
            manarr:this.props.msg.manarr,
            lei:this.props.msg.lei,
            tab:this.props.msg.tab
        }
    }
    enter(e){
        e.currentTarget.style.borderBottom = '3px #ff6c00 solid';
        e.currentTarget.children[2].children[0].style.color = '#ff6c00';
    };
    leave(e){
        e.currentTarget.style.borderBottom = 'none';
        e.currentTarget.children[2].children[0].style.color = '#323333';
    };
    gt(){
        console.log(this)
        // this.props.history.push('/index')
        // window.location.href="https://baidu.com"
    };
    render(){
        return(
            <div id="tit">
                <div className="tit-head">
                    <img src={caricon} alt=""/>
                    <span>{this.state.lei}</span>
                </div>
                <Tabs defaultActiveKey="1">
                    <TabPane tab={this.state.tab[0]} key="1">
                        <img className="carhead" src={this.state.headpic[0]} alt=""/>
                        <div className="car-con">{
                            this.state.picarr.map((item,i)=>{
                                return  <ul key={i}>
                                {
                                    item.map((item1,i)=>{
                                        return <li key={i} onMouseEnter={this.enter.bind(this)} onMouseLeave={this.leave.bind(this)} onClick={this.gt.bind(this)}>
                                            <div className="qtou">
                                                <img src={item1.img} alt=""/>
                                            </div>
                                            <div className="titshadow">
                                                <p>{item1.tit}</p>
                                            </div>
                                            <div className="carinfo">
                                                <p>
                                                    <img src={nameicon} alt=""/>
                                                    <span>{item1.name}</span>
                                                </p>
                                                <p>
                                                    <img src={phoneicon} alt=""/>
                                                    <span>{item1.phone}</span>
                                                </p>
                                                <p>
                                                    <img src={adressicon} alt=""/>
                                                    <span title={item1.address} className="address">{item1.address} </span>
                                                </p>
                                            </div>
                                        </li>
                                    })
                                }
                                </ul>
                            })
                        }
                        </div>
                    </TabPane>
                    <TabPane tab={this.state.tab[1]} key="2">
                    <img className="carhead" src={this.state.headpic[1]} alt=""/>
                        <div className="car-con">{
                            this.state.manarr.map((item,i)=>{
                                return  <ul key={i}>
                                {
                                    item.map((item1,i)=>{
                                        return <li key={i} onMouseEnter={this.enter.bind(this)} onMouseLeave={this.leave.bind(this)}>
                                            <div className="qtou">
                                                <img src={item1.img} alt=""/>
                                            </div>
                                            <div className="titshadow">
                                                <p>{item1.tit}</p>
                                            </div>
                                            <div className="carinfo">
                                                <p>
                                                    <img src={nameicon} alt=""/>
                                                    <span>{item1.name}</span>
                                                </p>
                                                <p>
                                                    <img src={phoneicon} alt=""/>
                                                    <span>{item1.phone}</span>
                                                </p>
                                                <p>
                                                    <img src={adressicon} alt=""/>
                                                    <span title={item1.address} className="address">{item1.address} </span>
                                                </p>
                                            </div>
                                        </li>
                                    })
                                }
                                </ul>
                            })
                        }
                        </div>
                    </TabPane>
                    <TabPane tab={this.state.tab[2]} key="3">
                    <img className="carhead" src={this.state.headpic[2]} alt=""/>
                        <div className="car-con">{
                            this.state.picarr.map((item,i)=>{
                                return  <ul key={i}>
                                {
                                    item.map((item1,i)=>{
                                        return <li key={i} onMouseEnter={this.enter.bind(this)} onMouseLeave={this.leave.bind(this)}>
                                            <div className="qtou">
                                                <img src={item1.img} alt=""/>
                                            </div>
                                            <div className="titshadow">
                                                <p>{item1.tit}</p>
                                            </div>
                                            <div className="carinfo">
                                                <p>
                                                    <img src={nameicon} alt=""/>
                                                    <span>{item1.name}</span>
                                                </p>
                                                <p>
                                                    <img src={phoneicon} alt=""/>
                                                    <span>{item1.phone}</span>
                                                </p>
                                                <p>
                                                    <img src={adressicon} alt=""/>
                                                    <span title={item1.address} className="address">{item1.address} </span>
                                                </p>
                                            </div>
                                        </li>
                                    })
                                }
                                </ul>
                            })
                        }
                        </div>
                    </TabPane>
                </Tabs>
            </div>
        );
    }
}

// 导出组件
export default Goods;